<!-- homepage part -->

<body>
    <div class="container-fluid">
        <div class="row clearfix">

            <div class="sidebar">

                <div class="sidebar-panel" id="scrollSpy-panel">
                    <h3 class="sidebar-panel-title narrow-spacing-2">Visual Narrative Strategies</h3>
                    <div class="sidebar-panel-group">
                        <a href="#" class="sidebar-btn scrollSpy-btn active">
                            <span class="scrollSpy-btn-symbol"></span>
                            <span class="scrollSpy-btn-stop"></span>
                            <span class="scrollSpy-btn-text">Emphasis (13)</span>
                        </a>
                        <a href="#" class="sidebar-btn scrollSpy-btn">
                            <span class="scrollSpy-btn-symbol"></span>
                            <span class="scrollSpy-btn-stop"></span>
                            <span class="scrollSpy-btn-text">Suspense (5)</span>
                        </a>
                        <a href="#" class="sidebar-btn scrollSpy-btn">
                            <span class="scrollSpy-btn-symbol"></span>
                            <span class="scrollSpy-btn-stop"></span>
                            <span class="scrollSpy-btn-text">Comparison (8)</span>
                        </a>
                    </div>
                </div>

                <div class="sidebar-panel" id="filter-panel">
                    <h3 class="sidebar-panel-title">Editorial Layers</h3>
                    <div class="sidebar-panel-group">
                        <a href="#" class="sidebar-btn filter-btn">
                            <span class="filter-btn-symbol"></span>
                            <span class="filter-btn-text">Elements of Visualization</span>
                        </a>
                        <a href="#" class="sidebar-btn filter-btn">
                            <span class="filter-btn-symbol"></span>
                            <span class="filter-btn-text narrow-spacing-8">Elements added to Visualization</span>
                        </a>
                        <a href="#" class="sidebar-btn filter-btn">
                            <span class="filter-btn-symbol"></span>
                            <span class="filter-btn-text">Camera</span>
                        </a>
                        <a href="#" class="sidebar-btn filter-btn">
                            <span class="filter-btn-symbol"></span>
                            <span class="filter-btn-text">Timeline</span>
                        </a>
                    </div>
                </div>

            </div>

            <div class="col column display-container" id="card-display">
                <!-- <div class="search-fail">(~_~)'`&nbsp;&nbsp;Sorry, nothing found.</div> -->
                <div class="emphasis">
                    <div class="display-reminder">
                        <div class="reminder-head">
                            <span class="reminder-symbol"></span>
                            <span class="reminder-title">Emphasis (13)</span>
                        </div>
                        <div class="reminder-desc">
                            Emphasis is one of the most-supported narrative strategies in data videos. It communicates
                            coremessages by creating “look here” signals with visual hierarchy, i.e., visual contrast
                            between colors, shapes,sizes, or movements.
                        </div>
                    </div>
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 card-deck">

                        <div class="col-xl-4 col-lg-6 col-sm-12 position-relative trans-3d th4on card-deck-single"
                            name="card_1">
                            <div class="card-inner">
                                <div class="card front">
                                    <div class="card-header">
                                        <div class="header-text">
                                            <div class="header-text-title">Pulse</div>
                                            <div class="header-text-class">The elements of visualization</div>
                                        </div>
                                        <span class="header-symbol"
                                            style="background: url(./assets/image/inth4on.svg) 0% 0% / cover no-repeat;"></span>
                                    </div>
                                    <div class="card-frontImg">
                                        <img class="card-img front-gif" src="/assets/image/fail_loading.svg">
                                        <img class="card-img front-preview" src="/assets/image/fail_loading.svg">
                                    </div>
                                    <div class="card-body">
                                        <div class="card-body-subtitle">HOW</div>
                                        <p class="card-body-text">Expand and contract rhythmically.</p>
                                        <div class="card-body-subtitle">WHY</div>
                                        <p class="card-body-text">Size contrast is a common way of attracting attention
                                            and conveying importance.
                                        </p>
                                        <div class="card-body-subtitle">Applicable Visualization Techniques</div>
                                        <p class="card-body-text">Size contrast is a common way of attracting attention
                                            and conveying importance.
                                        </p>
                                    </div>
                                    <div class="card-footer">
                                        <span class="card-footer-num">NO. 1</span>
                                        <button class="card-footer-bottom">View examples</button>
                                    </div>
                                </div>
                                <div class="card back">
                                    <div class="card-header">
                                        <div class="header-text">
                                            <div class="header-text-title">Pulse</div>
                                            <div class="header-text-class">The elements of visualization</div>
                                        </div>
                                        <span class="header-symbol"
                                            style="background: url(./assets/image/inth4on.svg) 0% 0% / cover no-repeat;"></span>
                                    </div>
                                    <div class="card-imgBox" style="position: relative;">
                                        <img class="card-img back-gif" src="/assets/image/fail_loading.svg">
                                        <div class="img-cover">
                                            <div class="img-cover-mask"></div>
                                            <span class="img-cover-overlay" type="button" data-toggle="modal" data-target="#zooming-modal"></span>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h6 class="card-body-subtitle">Inequality: how wealth is distributed in the UK - animated video</h6>
                                        <div class="caption">
                                            <div><span>Source: </span>The Guardian</div>
                                            <div><span>Year: </span>2013</div>
                                            <div><span>Category: </span>Social Sciences</div>
                                            <div><span>Subcategory: </span>Economics</div>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <!-- <span class="card-footer-num">NO. 1</span> -->
                                        <a href="https://www.theguardian.com/commentisfree/video/2013/oct/08/inequality-how-wealth-distributed-uk-animated-video"
                                            target="_blank">URL</a>
                                        <button class="card-footer-bottom">Back to front</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>
</body>